<template>
	<view class="integral">
		<view class="search">
			<!-- 	<view class="search-box">
				<view class="item">
					<u-icon name="search"></u-icon>
					<text class="item-title">搜索商品</text>
				</view>
			</view> -->
			<u-search
				:action-style="{ border: '1px solid' + vuex_config.themeColor1, color: vuex_config.themeColor1, padding: '10rpx', borderRadius: '10rpx' }"
				placeholder="搜索商品" v-model="search.name" @custom="onSearch" @clear="onSearch"></u-search>
		</view>
		<sww-swipe v-if="banner[0]" :list="banner" border-radius="20rpx" :custom-style="{ padding: '0 30rpx' }">
		</sww-swipe>
		<sww-tabs :list="list" v-model="currentIndex" :custom-style="{ padding: '0 20rpx' }" @change="onSearch">
		</sww-tabs>
		<integral-list :dataList="dataList"></integral-list>
		<sww-load-more :params="dataListParams"></sww-load-more>
	</view>
</template>

<script>
	import {
		pageShare
	} from '@/mixins/pageShare';
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js';
	import integralList from '@/pagecomponents/integralList/index'
	export default {
		mixins: [pageShare, pagingMixin],
		data() {
			return {
				list: [{
					name: '全部',
					pk_id: '-1'
				}],
				currentIndex: 0,
				banner: [],
				search: {
					name: ''
				}
			};
		},
		components: {
			'integral-list':integralList
		},
		created() {
			this.initPage();
		},
		onReachBottom() {
			this._load_data()
		},
		onShareAppMessage: function() {
			return this.getShareAppMessage();
		},
		onShareTimeline: function() {
			return this.getShareTimeline();
		},
		methods: {
			initPage() {
				this.$resPost('GetCommonPicList', {
					type: 8
				}).then(res => {
					res.data.forEach(item => {
						this.banner.push({
							img: item.img
						});
					});
				});
				this.$resPost('GetCommonClassify', {
					type: 8,
					page_size: 100
				}).then(({
					data
				}) => {
					this.list = this.list.concat(data)
				});
				let params = {
					...this.search
				};
				this._init_data('GetMallProductList', {
					...params
				});
			},
			onSearch() {
				let params = {
					type: this.list[this.currentIndex].pk_id,
					...this.search,
				};
				this._init_data('GetMallProductList', {
					...params
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.integral {
		.search {
			padding: 20rpx 30rpx 30rpx;

			.search-box {
				width: 690rpx;
				background-color: #fff;
				line-height: 66rpx;
				display: flex;
				justify-content: center;
				border-radius: 40rpx;
				font-size: 24rpx;
				color: #999;

				.item {
					.item-title {
						margin-left: 12rpx;
					}
				}
			}
		}
	}
</style>
